<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">产品管理系统</h1>

        <!-- 操作栏 -->
        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div class="flex-1">
                    <label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">搜索产品</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 flex">
                            <i class="fa fa-search text-gray-400"></i>
                        </span>
                        <input
                            type="text"
                            id="search-input"
                            placeholder="输入产品名称..."
                            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                        >
                    </div>
                </div>

                <div class="w-full md:w-auto">
                    <label for="category-select" class="block text-sm font-medium text-gray-700 mb-1">产品分类</label>
                    <select
                        id="category-select"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                    >
                        <option value="">所有分类</option>
                        <option value="电子产品">电子产品</option>
                        <option value="服装">服装</option>
                        <option value="食品">食品</option>
                        <option value="图书">图书</option>
                    </select>
                </div>

                <div class="self-end">
                    <button
                        id="search-button"
                        class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center mr-2"
                    >
                        <i class="fa fa-search mr-2"></i>搜索
                    </button>
                    <button
                        id="add-product-button"
                        class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center"
                    >
                        <i class="fa fa-plus mr-2"></i>新增产品
                    </button>
                </div>
            </div>
        </div>

        <!-- 加载指示器 -->
        <div id="loading-indicator" class="hidden text-center py-8">
            <i class="fa fa-spinner fa-spin text-3xl text-blue-500"></i>
            <p class="mt-2 text-gray-600">正在加载...</p>
        </div>

        <!-- 结果区域 -->
        <div id="results-container" class="bg-white rounded-lg shadow-md overflow-hidden">
            <div id="results-header" class="px-6 py-4 border-b border-gray-200 bg-gray-50 hidden">
                <h2 class="text-xl font-semibold text-gray-800">产品列表</h2>
            </div>

            <div id="no-results" class="px-6 py-12 text-center hidden">
                <i class="fa fa-search-minus text-4xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">没有找到产品</p>
            </div>

            <div id="results-list" class="divide-y divide-gray-200">
                <!-- 结果将通过JavaScript动态插入 -->
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="message-toast" class="fixed bottom-6 right-6 px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center hidden">
        <i id="message-icon" class="mr-2 text-xl"></i>
        <span id="message-text"></span>
    </div>

    <!-- 新增产品模态框 -->
    <div id="add-product-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-lg transform transition-all scale-95 opacity-0" id="add-modal-content">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h2 class="text-xl font-bold text-gray-800">新增产品</h2>
                    <button id="close-add-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>

            <div class="p-6">
                <form id="add-product-form">
                    <div class="mb-4">
                        <label for="add-product-name" class="block text-sm font-medium text-gray-700 mb-1">产品名称 <span class="text-red-500">*</span></label>
                        <input
                            type="text"
                            id="add-product-name"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品名称"
                        >
                    </div>

                    <div class="mb-4">
                        <label for="add-product-category" class="block text-sm font-medium text-gray-700 mb-1">产品分类 <span class="text-red-500">*</span></label>
                        <input
                            type="text"
                            id="add-product-category"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品分类"
                        >
                    </div>

                    <div class="mb-4">
                        <label for="add-product-price" class="block text-sm font-medium text-gray-700 mb-1">产品价格 <span class="text-red-500">*</span></label>
                        <input
                            type="number"
                            id="add-product-price"
                            step="0.01"
                            min="0"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品价格"
                        >
                    </div>

                    <div class="mb-6">
                        <label for="add-product-description" class="block text-sm font-medium text-gray-700 mb-1">产品描述 <span class="text-red-500">*</span></label>
                        <textarea
                            id="add-product-description"
                            rows="3"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品描述"
                        ></textarea>
                    </div>

                    <div class="flex justify-end gap-3">
                        <button
                            type="button"
                            id="cancel-add"
                            class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition duration-200"
                        >
                            取消
                        </button>
                        <button
                            type="submit"
                            class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center"
                        >
                            <i class="fa fa-save mr-2"></i>添加产品
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑产品模态框 -->
    <div id="edit-product-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-lg transform transition-all scale-95 opacity-0" id="edit-modal-content">
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h2 class="text-xl font-bold text-gray-800">编辑产品</h2>
                    <button id="close-edit-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>

            <div class="p-6">
                <form id="edit-product-form">
                    <input type="hidden" id="edit-product-id">

                    <div class="mb-4">
                        <label for="edit-product-name" class="block text-sm font-medium text-gray-700 mb-1">产品名称 <span class="text-red-500">*</span></label>
                        <input
                            type="text"
                            id="edit-product-name"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品名称"
                        >
                    </div>

                    <div class="mb-4">
                        <label for="edit-product-category" class="block text-sm font-medium text-gray-700 mb-1">产品分类 <span class="text-red-500">*</span></label>
                        <input
                            type="text"
                            id="edit-product-category"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品分类"
                        >
                    </div>

                    <div class="mb-4">
                        <label for="edit-product-price" class="block text-sm font-medium text-gray-700 mb-1">产品价格 <span class="text-red-500">*</span></label>
                        <input
                            type="number"
                            id="edit-product-price"
                            step="0.01"
                            min="0"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品价格"
                        >
                    </div>

                    <div class="mb-6">
                        <label for="edit-product-description" class="block text-sm font-medium text-gray-700 mb-1">产品描述 <span class="text-red-500">*</span></label>
                        <textarea
                            id="edit-product-description"
                            rows="3"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                            placeholder="请输入产品描述"
                        ></textarea>
                    </div>

                    <div class="flex justify-end gap-3">
                        <button
                            type="button"
                            id="cancel-edit"
                            class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition duration-200"
                        >
                            取消
                        </button>
                        <button
                            type="submit"
                            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center"
                        >
                            <i class="fa fa-save mr-2"></i>更新产品
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="delete-confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md transform transition-all scale-95 opacity-0" id="delete-modal-content">
            <div class="p-6 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-800">确认删除</h2>
            </div>

            <div class="p-6">
                <p class="text-gray-700 mb-6">您确定要删除这个产品吗？此操作无法撤销。</p>
                <input type="hidden" id="delete-product-id">

                <div class="flex justify-end gap-3">
                    <button
                        type="button"
                        id="cancel-delete"
                        class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition duration-200"
                    >
                        取消
                    </button>
                    <button
                        type="button"
                        id="confirm-delete"
                        class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center"
                    >
                        <i class="fa fa-trash mr-2"></i>删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 工具函数 - 获取CSRF令牌
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // 工具函数 - 显示消息提示
        function showMessage(message, isError = false) {
            const toast = document.getElementById('message-toast');
            const icon = document.getElementById('message-icon');
            const text = document.getElementById('message-text');

            text.textContent = message;
            toast.classList.remove('hidden', 'bg-green-500', 'bg-red-500');
            icon.classList.remove('fa-check-circle', 'fa-exclamation-circle', 'text-green-200', 'text-red-200');

            if (isError) {
                toast.classList.add('bg-red-500');
                icon.classList.add('fa-exclamation-circle', 'text-red-200');
            } else {
                toast.classList.add('bg-green-500');
                icon.classList.add('fa-check-circle', 'text-green-200');
            }

            // 显示动画
            setTimeout(() => {
                toast.classList.remove('translate-y-20', 'opacity-0');
                toast.classList.add('translate-y-0', 'opacity-100');
            }, 10);

            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('translate-y-20', 'opacity-0');

                setTimeout(() => {
                    toast.classList.add('hidden');
                }, 300);
            }, 3000);
        }

        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const searchInput = document.getElementById('search-input');
            const categorySelect = document.getElementById('category-select');
            const searchButton = document.getElementById('search-button');
            const addProductButton = document.getElementById('add-product-button');
            const resultsList = document.getElementById('results-list');
            const resultsHeader = document.getElementById('results-header');
            const noResults = document.getElementById('no-results');
            const loadingIndicator = document.getElementById('loading-indicator');

            // 新增产品相关元素
            const addProductModal = document.getElementById('add-product-modal');
            const addModalContent = document.getElementById('add-modal-content');
            const closeAddModal = document.getElementById('close-add-modal');
            const cancelAdd = document.getElementById('cancel-add');
            const addProductForm = document.getElementById('add-product-form');

            // 编辑产品相关元素
            const editProductModal = document.getElementById('edit-product-modal');
            const editModalContent = document.getElementById('edit-modal-content');
            const closeEditModal = document.getElementById('close-edit-modal');
            const cancelEdit = document.getElementById('cancel-edit');
            const editProductForm = document.getElementById('edit-product-form');

            // 删除产品相关元素
            const deleteConfirmModal = document.getElementById('delete-confirm-modal');
            const deleteModalContent = document.getElementById('delete-modal-content');
            const closeDeleteModal = document.getElementById('cancel-delete');
            const confirmDelete = document.getElementById('confirm-delete');

            // 搜索/加载产品
            function performSearch() {
                const query = searchInput.value.trim();
                const category = categorySelect.value;

                // 显示加载指示器
                loadingIndicator.classList.remove('hidden');
                resultsList.innerHTML = '';
                resultsHeader.classList.add('hidden');
                noResults.classList.add('hidden');

                // 构建查询URL
                const url = new URL("{% url 'search_products' %}", window.location.origin);
                if (query) url.searchParams.append('query', query);
                if (category) url.searchParams.append('category', category);

                // 发送Ajax请求
                fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // 隐藏加载指示器
                        loadingIndicator.classList.add('hidden');

                        if (data.products && data.products.length > 0) {
                            resultsHeader.classList.remove('hidden');
                            noResults.classList.add('hidden');

                            // 填充结果列表
                            resultsList.innerHTML = '';
                            data.products.forEach(product => {
                                const productElement = document.createElement('div');
                                productElement.className = 'px-6 py-4 hover:bg-gray-50 transition duration-150';
                                productElement.innerHTML = `
                                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-800">${product.name}</h3>
                                            <p class="text-sm text-gray-500 mt-1">${product.category}</p>
                                            <p class="text-gray-700 mt-2">${product.description}</p>
                                        </div>
                                        <div class="mt-3 md:mt-0 flex items-center gap-4">
                                            <span class="font-bold text-blue-600">¥${product.price}</span>
                                            <button onclick="showEditModal(${product.id})"
                                                    class="text-blue-500 hover:text-blue-700 transition-colors">
                                                <i class="fa fa-edit"></i> 编辑
                                            </button>
                                            <button onclick="showDeleteConfirm(${product.id})"
                                                    class="text-red-500 hover:text-red-700 transition-colors">
                                                <i class="fa fa-trash"></i> 删除
                                            </button>
                                        </div>
                                    </div>
                                `;
                                resultsList.appendChild(productElement);
                            });
                        } else {
                            // 没有找到结果
                            resultsHeader.classList.add('hidden');
                            noResults.classList.remove('hidden');
                        }
                    })
                    .catch(error => {
                        console.error('查询出错:', error);
                        loadingIndicator.classList.add('hidden');
                        resultsHeader.classList.add('hidden');
                        noResults.classList.remove('hidden');
                        noResults.innerHTML = `
                            <i class="fa fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
                            <p class="text-gray-500">查询过程中出现错误，请重试</p>
                        `;
                        showMessage('查询失败: ' + error.message, true);
                    });
            }

            // 显示新增产品模态框
            function showAddModal() {
                addProductModal.classList.remove('hidden');
                // 重置表单
                addProductForm.reset();
                // 显示动画
                setTimeout(() => {
                    addModalContent.classList.remove('scale-95', 'opacity-0');
                    addModalContent.classList.add('scale-100', 'opacity-100', 'transition-all', 'duration-300');
                }, 10);
            }

            // 隐藏新增产品模态框
            function hideAddModal() {
                addModalContent.classList.remove('scale-100', 'opacity-100');
                addModalContent.classList.add('scale-95', 'opacity-0');

                setTimeout(() => {
                    addProductModal.classList.add('hidden');
                }, 300);
            }

            // 显示编辑产品模态框
            window.showEditModal = function(productId) {
                // 加载产品数据
                fetch(`{% url 'edit_product' 0 %}`.replace('0', productId))
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('获取产品信息失败');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            const product = data.product;
                            // 填充表单数据
                            document.getElementById('edit-product-id').value = product.id;
                            document.getElementById('edit-product-name').value = product.name;
                            document.getElementById('edit-product-category').value = product.category;
                            document.getElementById('edit-product-price').value = product.price;
                            document.getElementById('edit-product-description').value = product.description;

                            // 显示模态框
                            editProductModal.classList.remove('hidden');
                            setTimeout(() => {
                                editModalContent.classList.remove('scale-95', 'opacity-0');
                                editModalContent.classList.add('scale-100', 'opacity-100', 'transition-all', 'duration-300');
                            }, 10);
                        } else {
                            showMessage(data.message || '获取产品信息失败', true);
                        }
                    })
                    .catch(error => {
                        console.error('加载产品数据出错:', error);
                        showMessage('加载产品数据失败: ' + error.message, true);
                    });
            }

            // 隐藏编辑产品模态框
            function hideEditModal() {
                editModalContent.classList.remove('scale-100', 'opacity-100');
                editModalContent.classList.add('scale-95', 'opacity-0');

                setTimeout(() => {
                    editProductModal.classList.add('hidden');
                }, 300);
            }

            // 显示删除确认模态框
            window.showDeleteConfirm = function(productId) {
                document.getElementById('delete-product-id').value = productId;
                deleteConfirmModal.classList.remove('hidden');

                setTimeout(() => {
                    deleteModalContent.classList.remove('scale-95', 'opacity-0');
                    deleteModalContent.classList.add('scale-100', 'opacity-100', 'transition-all', 'duration-300');
                }, 10);
            }

            // 隐藏删除确认模态框
            function hideDeleteModal() {
                deleteModalContent.classList.remove('scale-100', 'opacity-100');
                deleteModalContent.classList.add('scale-95', 'opacity-0');

                setTimeout(() => {
                    deleteConfirmModal.classList.add('hidden');
                }, 300);
            }

            // 添加产品
            function addProduct(event) {
                event.preventDefault();

                // 获取表单数据
                const formData = {
                    name: document.getElementById('add-product-name').value.trim(),
                    category: document.getElementById('add-product-category').value.trim(),
                    price: document.getElementById('add-product-price').value.trim(),
                    description: document.getElementById('add-product-description').value.trim()
                };

                // 前端验证
                if (!formData.name) {
                    showMessage('请输入产品名称', true);
                    return;
                }

                if (!formData.category) {
                    showMessage('请输入产品分类', true);
                    return;
                }

                if (!formData.price || isNaN(formData.price) || parseFloat(formData.price) < 0) {
                    showMessage('请输入有效的产品价格', true);
                    return;
                }

                if (!formData.description) {
                    showMessage('请输入产品描述', true);
                    return;
                }

                // 发送Ajax请求
                fetch("{% url 'add_product' %}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.message || '添加产品失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        showMessage('产品添加成功');
                        hideAddModal();
                        // 重新加载产品列表
                        performSearch();
                    } else {
                        showMessage(data.message || '添加产品失败', true);
                    }
                })
                .catch(error => {
                    console.error('添加产品出错:', error);
                    showMessage(error.message || '添加产品时发生错误', true);
                });
            }

            // 更新产品
            function updateProduct(event) {
                event.preventDefault();

                const productId = document.getElementById('edit-product-id').value;
                // 获取表单数据
                const formData = {
                    name: document.getElementById('edit-product-name').value.trim(),
                    category: document.getElementById('edit-product-category').value.trim(),
                    price: document.getElementById('edit-product-price').value.trim(),
                    description: document.getElementById('edit-product-description').value.trim()
                };

                // 前端验证
                if (!formData.name) {
                    showMessage('请输入产品名称', true);
                    return;
                }

                if (!formData.category) {
                    showMessage('请输入产品分类', true);
                    return;
                }

                if (!formData.price || isNaN(formData.price) || parseFloat(formData.price) < 0) {
                    showMessage('请输入有效的产品价格', true);
                    return;
                }

                if (!formData.description) {
                    showMessage('请输入产品描述', true);
                    return;
                }

                // 发送Ajax请求
                fetch(`{% url 'edit_product' 0 %}`.replace('0', productId), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.message || '更新产品失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        showMessage('产品更新成功');
                        hideEditModal();
                        // 重新加载产品列表
                        performSearch();
                    } else {
                        showMessage(data.message || '更新产品失败', true);
                    }
                })
                .catch(error => {
                    console.error('更新产品出错:', error);
                    showMessage(error.message || '更新产品时发生错误', true);
                });
            }

            // 删除产品
            function deleteProduct() {
                const productId = document.getElementById('delete-product-id').value;

                fetch(`{% url 'delete_product' 0 %}`.replace('0', productId), {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': getCookie('csrftoken')
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.message || '删除产品失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        showMessage('产品删除成功');
                        hideDeleteModal();
                        // 重新加载产品列表
                        performSearch();
                    } else {
                        showMessage(data.message || '删除产品失败', true);
                    }
                })
                .catch(error => {
                    console.error('删除产品出错:', error);
                    showMessage(error.message || '删除产品时发生错误', true);
                });
            }

            // 绑定事件
            searchButton.addEventListener('click', performSearch);
            addProductButton.addEventListener('click', showAddModal);

            // 搜索相关事件
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
            categorySelect.addEventListener('change', performSearch);

            // 新增产品相关事件
            closeAddModal.addEventListener('click', hideAddModal);
            cancelAdd.addEventListener('click', hideAddModal);
            addProductForm.addEventListener('submit', addProduct);
            addProductModal.addEventListener('click', function(e) {
                if (e.target === addProductModal) {
                    hideAddModal();
                }
            });

            // 编辑产品相关事件
            closeEditModal.addEventListener('click', hideEditModal);
            cancelEdit.addEventListener('click', hideEditModal);
            editProductForm.addEventListener('submit', updateProduct);
            editProductModal.addEventListener('click', function(e) {
                if (e.target === editProductModal) {
                    hideEditModal();
                }
            });

            // 删除产品相关事件
            closeDeleteModal.addEventListener('click', hideDeleteModal);
            confirmDelete.addEventListener('click', deleteProduct);
            deleteConfirmModal.addEventListener('click', function(e) {
                if (e.target === deleteConfirmModal) {
                    hideDeleteModal();
                }
            });

            // 初始加载所有产品
            performSearch();
        });
    </script>
</body>
</html>
